<template>
  <el-card @click="handleDeptList(false)">
    <div class="list-h space">
      <div>
        <el-button type="primary" size="small" @click="handlerAdd"
          >创建新项目</el-button
        >
      </div>

      <el-form
        :inline="true"
        :model="formInline"
        ref="formRef"
        class="demo-form-inline"
        size="small"
      >
        <el-form-item label="项目名称" prop="projectNameLike">
          <el-input
            class="width-custom120"
            v-model="formInline.projectNameLike"
          />
        </el-form-item>

        <el-form-item label="所属区域">
          <el-input
            v-model.trim="filterText"
            class="width-custom140"
            @click.stop="handleDeptList(true)"
          ></el-input>
          <el-tree
            clearable
            ref="treeRef"
            class="filter-tree"
            :data="deptList"
            :props="state.defaultProps"
            :filter-node-method="filterNode"
            v-if="state.showDeptList"
            @node-click="handleChangeDept"
          />
        </el-form-item>

        <el-form-item label="所属单位" prop="projectFactoryNameLike">
          <el-input
            class="width-custom120"
            v-model="formInline.projectFactoryNameLike"
          />
        </el-form-item>

        <el-form-item label="项目类型" prop="projectTypeCode">
          <el-select
            v-model="formInline.projectTypeCode"
            value-key="dicCode"
            class="width-custom100"
          >
            <el-option
              class="default-option"
              v-for="item in projectTypeList"
              :label="item.dicValue"
              :key="item.dicCode"
              :value="item.dicCode"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="项目年度" prop="projectYear">
          <el-date-picker
            v-model="formInline.projectYear"
            type="year"
            value-format="YYYY"
            placeholder="项目年度"
            class="width-custom100"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="项目负责人" prop="projectLeaderNameLike">
          <el-input
            class="width-custom100"
            v-model="formInline.projectLeaderNameLike"
          />
        </el-form-item>

        <el-form-item label="创建时间" prop="timeValue">
          <el-date-picker
            class="width-custom220"
            v-model="timeValue"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="handleChangeDate"
          />
        </el-form-item>

        <el-form-item class="btn-wrap">
          <el-button @click="handleReset">重置</el-button>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>

        <el-form-item>
          <span class="exprand-box" @click="pickUp">
            <i class="icon snowfont icon-shouqicaidan"></i>
          </span>
        </el-form-item>
      </el-form>
    </div>

    <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        stripe
        :header-cell-style="{
          background: '#F7F9FD',
          color: '#000',
          height: '48px',
          borderTop: '1px soild #E4E8F2'
        }"
      >
        <template #empty>
          <el-empty :image-size="150" description="暂无数据"></el-empty>
        </template>

        <el-table-column type="index" label="序号" width="80">
          <template v-slot="scope">
            <span>{{
              (formInline.pageNum - 1) * formInline.pageSize + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="projectCode" label="项目编号"> </el-table-column>
        <el-table-column prop="projectName" label="项目名称"> </el-table-column>
        <el-table-column prop="projectRegionName" label="所属区域" width="140">
        </el-table-column>
        <el-table-column
          prop="projectFactoryName"
          label="所属单位"
        ></el-table-column>
        <el-table-column prop="projectTypeName" label="项目类型" width="100">
        </el-table-column>
        <el-table-column
          prop="projectYear"
          label="项目年度"
          width="100"
        ></el-table-column>
        <el-table-column prop="projectLeaderName" label="项目负责人">
        </el-table-column>
        <el-table-column
          prop="createUserName"
          label="创建人"
          width="140"
        ></el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="handleOperate(row)"
              >进入</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <re-pagination
        v-if="total > 0"
        :total="total"
        v-model:page="formInline.pageNum"
        v-model:limit="formInline.pageSize"
        @pagination="handleChangePage"
      />
    </el-skeleton>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, defineEmits } from "vue";
import { useRouter } from "vue-router";
import RePagination from "/@/components/RePagination/index.vue";
import { postDictList } from "/@/api/home";
import { getSecDeptTree, projectManageList } from "/@/api/projects";
import { storageLocal } from "/@/utils/storage";
import { ElTree } from "element-plus";
const formRef = ref<HTMLFormElement | null>(null) as any;
const treeRef = ref<HTMLFormElement | null>(null) as any;
const emit = defineEmits(["toggleShow"]);
const initData = {
  projectNameLike: "", //项目名称
  createTimeStrStart: "",
  createTimeStrEnd: "",
  projectTypeCode: "", //项目类型
  projectLeaderNameLike: "", //项目负责人
  projectYear: "", //项目年度
  projectRegionCode: "", //区域id
  projectFactoryNameLike: "", //所属单位
  pageNum: 1,
  pageSize: 10
};

const formInline = reactive(initData);
const timeValue = ref(null);
const tableData = ref([]);
const total = ref<number>(0);
const router = useRouter();
const loading = ref<boolean>(false);
let projectTypeList = ref([]);
let state = reactive({
  defaultProps: {
    children: "children",
    label: "deptDescShrt"
  },
  showDeptList: false
});
const filterNode = (value: string, data) => {
  if (!value) return true;
  return data.deptDescShrt.includes(value);
};
const filterText = ref("");
const deptList = ref([]);
// watch(filterText, val => {
//   treeRef.value!.filter(val);
// });
//获取数据列表
const getTableList = async () => {
  const { code, data } = await projectManageList({ ...formInline });
  if (code === 200) {
    tableData.value = data.list;
    total.value = data.rows;
  }
};

//改变时间
const handleChangeDate = item => {
  if (item) {
    formInline.createTimeStrStart = item[0];
    formInline.createTimeStrEnd = item[1];
  } else {
    formInline.createTimeStrStart = "";
    formInline.createTimeStrEnd = "";
  }
};

const handleReset = () => {
  formRef.value.resetFields();
  formInline.pageNum = 1;
  timeValue.value = null;
  filterText.value = "";
  formInline.projectRegionCode = "";
  handleChangeDate(null);
  getTableList();
};

const handleSearch = () => {
  formInline.pageNum = 1;
  getTableList();
};

const handleChangePage = () => {
  getTableList();
};

const handleOperate = row => {
  ["A", "B"].includes(row.projectTypeCode)
    ? router.push(`/projects${row.projectTypeCode}`)
    : router.push(`/projectsA`);
  storageLocal.setItem("projectInfo", {
    id: row.id,
    name: row.projectName,
    projectTypeCode: row.projectTypeCode
  });
};

// 工厂区域
const getDeptTreeFunc = async () => {
  try {
    const { data } = await getSecDeptTree({});
    deptList.value = data || [];
  } catch (err) {
    console.log(err);
  }
};

const handleChangeDept = node => {
  formInline.projectRegionCode = node.id;
  filterText.value = node.deptDescShrt;
  state.showDeptList = false;
};

const handleDeptList = flag => {
  state.showDeptList = flag;
};

// 项目类型
const initProjectTypeList = async () => {
  try {
    const { data } = await postDictList({ dicType: "thd_pro_type" });
    projectTypeList.value = data || [];
  } catch (err) {
    console.log(err);
  }
};

const handlerAdd = (): void => {
  router.push("/projects/manage/space/add");
};

const pickUp = () => {
  emit("toggleShow");
};

onMounted(() => {
  getDeptTreeFunc();
  initProjectTypeList();
  getTableList();
});
</script>
<style scoped lang="scss">
:deep .el-dialog__body {
  padding: 20px 40px 8px 10px;
}
.space:deep {
  .el-form-item__label {
    padding: 0 4px 0 0;
  }
  .el-form-item {
    margin-right: 8px;
  }
}
.exprand-box {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: rgba(82, 152, 255, 0.1);
  border-radius: 4px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
  i {
    color: #5298ff;
    font-size: 20px;
  }
}
.btn-wrap {
  text-align: right;
  margin-bottom: 12px;
}
</style>
